<template>
  <div id="labelManage">
    <div class="labelManage-head flex-center-center">
      {{ $t("labelManage.label") }}
    </div>
    <ul>
      <li
        v-for="(item, index) in label.list"
        :key="index"
        :class="{ active: Boolean(index === currentIndex) }"
        @click="handleClick(item, index)"
        @contextmenu="handleContextMenu(item, index)"
      >
        {{ item.title || item.text }}
      </li>
    </ul>
    <!--    </Dropdown>-->
  </div>
</template>

<script>
import { mapState, mapActions } from "vuex";
// import { Dropdown } from "ant-design-vue";
import Menu from "@/util/menu";
import flagBox from "@/util/flagBox.js";
import { scrollToPageTop } from "@/util";

export default {
  // components: { Dropdown },
  computed: {
    ...mapState({
      label: (state) => state.label,
    }),
  },
  data() {
    return {
      menu: null,
      visible: false,
      currentIndex: -1,
      currentConfigString: "",
    };
  },
  mounted() {
    this.menu = new Menu(
      "#labelManage",
      [{ label: this.$t("labelManage.deleteLabel"), value: "delete" }],
      (item) => {
        if (item.value === "delete") {
          const currenIndex = this.currentIndex;
          if (
            this.currentConfigString ===
            JSON.stringify(this.label.list[this.currentIndex])
          ) {
            flagBox.hide();
          }
          this.deleteLocalLabel(currenIndex);
          this.currentIndex = -1;
        }
      }
    );
  },
  methods: {
    ...mapActions(["deleteLocalLabel"]),
    handleClick(item, index) {
      // 判断是否是同一个索引值
      const isSame = Boolean(this.currentIndex === index);
      if (isSame) {
        this.currentIndex = -1;
      } else {
        this.currentIndex = index;
        scrollToPageTop(item.offsetTop);
      }
      // 缓存点击后的JSON字符串
      this.currentConfigString = JSON.stringify(item);
      this.$emit("afterClick", item, isSame);
    },
    handleContextMenu(item, index) {
      this.currentIndex = index;
    },
  },
};
</script>

<style lang="scss" scoped>
#labelManage {
  position: relative;
  height: 200px;
  word-break: break-all;
  width: 100%;
  overflow: auto;
  white-space: normal;
  display: block;

  .labelManage-head {
    background-color: #f1f2f3;
    height: 36px;
    font-size: 18px;
    color: #666666;
  }

  ul {
    height: calc(100% - 36px);
    overflow: auto;

    li {
      padding: 8px;

      &:before {
        content: "";
        display: inline-block;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: #0891b4;
      }
    }
  }
}

.active {
  background-color: #e7f5fb;
}
</style>
